<script setup>
import { defineProps } from 'vue'
import { Link } from '@inertiajs/vue3'
import Layout from '@/Layouts/Home.vue'
import Row from '@/Components/Grid/Row.vue'
import Col from '@/Components/Grid/Col.vue'
import ProductRow from '@/Layouts/Products/Row.vue'

const benefits = [
    {
        uri: '',
        text: '<strong>Большой ассортимент</strong><br>строительных материалов всегда в наличии',
        icon: `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.62 39.38a.9.9 0 0 0-.3-.67l-1.97-1.76 1.1-1.75a1.5 1.5 0 0 0-.3-1.92l-1.6-1.34 1.15-1.81a1.5 1.5 0 0 0-.3-1.93l-1.61-1.34 1.14-1.81c.4-.62.26-1.45-.3-1.92l-1.61-1.34 1.15-1.83c.4-.62.26-1.45-.3-1.92l-1.6-1.34 1.13-1.81a1.5 1.5 0 0 0-.3-1.93l-1.63-1.36.82-1.37A1.48 1.48 0 0 0 16 8l-6.46.02c-.82 0-1.47.67-1.47 1.5l.08 24.85a2.57 2.57 0 0 0-.57 1.62l.04 10.94a2.06 2.06 0 0 0 2.06 2.04h.58a2.05 2.05 0 0 0 2.05-2.06c0-.13.1-.24.24-.24l5.19-.03c.13 0 .24.11.24.25a2.06 2.06 0 0 0 2.06 2.05h.58c.55 0 1.07-.23 1.45-.61l.12-.12c.3-.38.48-.85.48-1.33l-.06-7.5Zm-2.6 7.75a.24.24 0 0 1-.18-.08.25.25 0 0 1-.07-.17 2.07 2.07 0 0 0-2.06-2.05l-5.18.02c-.55 0-1.07.23-1.45.61l-.11.13c-.31.37-.49.84-.49 1.32 0 .07-.02.13-.07.18a.24.24 0 0 1-.18.07h-.57a.24.24 0 0 1-.17-.07.24.24 0 0 1-.07-.18l-.04-10.93c0-.46.37-.82.82-.83l4.65-.01c.5 0 .96.17 1.32.5l4.65 4.15.02 7.09c0 .06-.02.12-.07.17a.24.24 0 0 1-.17.08H20ZM14.75 10.9c-.37.62-.24 1.42.32 1.89l1.62 1.35-1.15 1.81a1.5 1.5 0 0 0 .3 1.93l1.61 1.34-1.15 1.82a1.5 1.5 0 0 0 .3 1.93l1.6 1.34-1.13 1.8a1.5 1.5 0 0 0 .3 1.93l1.6 1.34-1.15 1.81a1.5 1.5 0 0 0 .3 1.93l1.61 1.34-.8 1.26-1.6-1.44a3.76 3.76 0 0 0-2.52-.95h-4.66l-.25.02-.1-23.54 5.6-.05-.65 1.14Z" fill="#000"></path><path d="m18.84 39.47-3.68-3.13a1.48 1.48 0 0 0-1.03-.35l-2.22.23a1.46 1.46 0 0 0-1.46 1.48v4.6c0 .8.68 1.48 1.48 1.48l5.75-.03a1.5 1.5 0 0 0 1.48-1.41l.17-1.65v-.1c.03-.43-.16-.84-.5-1.12Zm-1.3 1.25-.13 1.23-3.74.01-1.39.03.02-4 1.81-.18 3.43 2.91Zm-5.92-11.98c-.01 0-.01 0 0 0a.9.9 0 0 0-.64.27.89.89 0 0 0-.26.64v1.16a.9.9 0 0 0 .9.9.9.9 0 0 0 .9-.91v-1.16a.91.91 0 0 0-.9-.9Zm-.36-.94a.85.85 0 0 0 1.14-.82V12.66c0-.3-.17-.6-.44-.74a.87.87 0 0 0-.86 0 .89.89 0 0 0-.42.74L10.7 27c.02.37.24.7.57.8ZM47.89 8.47a.88.88 0 0 0-.62-.26L45.4 8.2h-.01a.87.87 0 0 0-.87.8l-.05.48-.1-.57a.86.86 0 0 0-.86-.72l-2.5-.03H41a.89.89 0 0 0-.85.63l-.12.44-.05-.32a.88.88 0 0 0-.85-.76l-4.38-.04c-.23 0-.47.1-.63.26a.95.95 0 0 0-.62-.27L31 8.07h-.02a.84.84 0 0 0-.6.25.88.88 0 0 0-.27.62l-.08 15.04c0 .38.23.71.6.83l3.24 1.12a2.62 2.62 0 0 1 1.76 2.4l-.36 1.58a37.04 37.04 0 0 0-.95 8.18c-.02 2.4.4 4.78 1.21 7.04a3.6 3.6 0 0 0 3.34 2.36h.02a3.6 3.6 0 0 0 3.35-2.3 19.73 19.73 0 0 0 1.32-7.02c.03-2.75-.26-5.5-.83-8.2l-.34-1.58a2.63 2.63 0 0 1 1.8-2.37l3.25-1.07c.36-.11.6-.45.61-.83l.11-15.03a.9.9 0 0 0-.27-.62Zm-7.26 19.97c0 .06 0 .12.02.18l.36 1.7c.55 2.55.82 5.18.8 7.8-.02 2.2-.43 4.35-1.22 6.4-.27.7-.96 1.18-1.71 1.18h-.01c-.76 0-1.45-.49-1.71-1.2a18.32 18.32 0 0 1-1.12-6.43c.02-2.62.32-5.24.92-7.8l.38-1.66a4.34 4.34 0 0 0-2.91-4.33l-2.65-.9V23l14.51.11v.38l-2.66.87a4.29 4.29 0 0 0-3 4.08Zm5.68-7.84v.75l-14.5-.11v-.76l14.5.12Zm.08-10.65-.06 8.9-14.52-.12.07-8.9.89.02.48 3.03c.06.42.42.73.86.73.43 0 .79-.3.86-.72l.52-3.03 2.88.03.5 3.63c.05.41.38.72.79.76.42.04.8-.22.9-.62l1.1-3.75 1.12.01 1.08 6.18a.88.88 0 0 0 1.74-.08l.6-6.08h.19Z" fill="#000"></path></svg>`,
    },
    {
        uri: '',
        text: '<strong>Доставка стройматериалов</strong><br>Доставка стройматериалов по адресу транспортом завода Латерес',
        icon: `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M47.236 36.83c-.793 0-1.425.633-1.437 1.428 0 .794.632 1.427 1.425 1.44.793.011 1.425-.634 1.438-1.428 0-.794-.632-1.427-1.426-1.44Zm-26.214-.037c-.793 0-1.426.633-1.438 1.427 0 .795.632 1.427 1.425 1.44.794 0 1.426-.633 1.438-1.427a1.43 1.43 0 0 0-1.425-1.44ZM46.43 24.024h-1.673a.873.873 0 0 0-.88.87l-.012 6.13c0 .483.384.88.867.88l5.888.013a1.51 1.51 0 0 0 1.314-.757 1.533 1.533 0 0 0 .012-1.514l-2.033-3.574a4.022 4.022 0 0 0-3.482-2.048Zm-.805 6.13.012-4.38h.794c.818 0 1.561.447 1.97 1.142l1.835 3.238h-4.611ZM22.41 20.96c0 .645-.52 1.166-1.165 1.153h-.012a1.154 1.154 0 0 1-1.153-1.166c0-.645.52-1.166 1.165-1.154a1.173 1.173 0 0 1 1.165 1.166Zm-3.867 5.025L5.64 25.96a1.053 1.053 0 0 1-1.054-1.055c0-.583.471-1.054 1.054-1.054l12.903.024c.582 0 1.053.472 1.053 1.055a1.06 1.06 0 0 1-1.053 1.055Zm-4.375 4.157-12.903-.025A1.053 1.053 0 0 1 .21 29.062c0-.583.471-1.054 1.054-1.054l12.903.024c.582 0 1.053.472 1.053 1.055s-.47 1.055-1.053 1.055Zm3.346-8.326-16.46-.025A1.053 1.053 0 0 1 0 20.736c0-.583.471-1.055 1.054-1.055l16.46.025c.582 0 1.053.471 1.053 1.055 0 .583-.47 1.055-1.053 1.055Z" fill="#000"></path>
            <path d="m55.79 28.181-2.777-4.268a6.834 6.834 0 0 0-5.739-3.103l-7.015-.012.012-3.97c0-2.644-2.132-4.79-4.772-4.79L14.973 12h-.012a4.722 4.722 0 0 0-3.371 1.402 4.733 4.733 0 0 0-1.401 3.376l-.025 16.652a4.569 4.569 0 0 0-2.627 4.12v.869c0 .372.16.658.483.844.31.186.67.21.855.21l7.326.013a4.991 4.991 0 0 0 4.846 3.748h.012a4.991 4.991 0 0 0 4.847-3.736l16.522.025a4.991 4.991 0 0 0 4.846 3.748h.012a4.99 4.99 0 0 0 4.847-3.735h2.801c.583 0 1.054-.472 1.054-1.055L56 28.74a1.62 1.62 0 0 0-.21-.559Zm-1.947.894-.012 8.364h-1.649c-.396-2.395-2.49-4.182-4.933-4.195h-.012a5.026 5.026 0 0 0-4.933 4.17H40.22l.025-14.506 7.016.012c1.611 0 3.098.807 3.966 2.147l2.615 4.008Zm-4.56 11.243a2.877 2.877 0 0 1-2.046.843 2.887 2.887 0 0 1-2.888-2.903c0-.77.31-1.502.855-2.048a2.826 2.826 0 0 1 2.045-.844c.769 0 1.5.31 2.045.856.546.547.843 1.279.843 2.048 0 .782-.31 1.502-.855 2.047Zm-32.203-5.2a5.054 5.054 0 0 0-1.003 2.246l-6.446-.012a2.456 2.456 0 0 1 2.442-2.246l5.008.012ZM12.285 19.47v-2.692a2.666 2.666 0 0 1 2.652-2.656l20.526.037c1.462 0 2.652 1.204 2.652 2.668l-.024 16.219-25.843-.05.024-13.327.013-.199Zm8.738 21.654a2.906 2.906 0 0 1-2.9-2.904c0-.769.31-1.501.855-2.047a2.889 2.889 0 0 1 4.09.012c.546.546.843 1.278.843 2.048a2.893 2.893 0 0 1-2.888 2.891Zm17.08-5.969v2.259l-12.134-.025a5.02 5.02 0 0 0-.992-2.259l13.126.025Z" fill="#000"></path>
        </svg>`,
    },
    {
        uri: '',
        text: '<strong>Простой возврат товаров</strong><br />которые не пригодились<br>в течение 360 дней',
        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="none">
            <path fill="#000" fill-rule="evenodd" d="M15.9 14.238c-.508.51-.976 1.043-1.403 1.598a1 1 0 1 1-1.585-1.22 18.418 18.418 0 0 1 1.575-1.792 1 1 0 0 1 1.414 1.414ZM11.835 18.2a1 1 0 0 1 .542 1.306c-.547 1.32-.912 2.7-1.095 4.097a1 1 0 1 1-1.983-.26c.206-1.569.615-3.117 1.23-4.602a1 1 0 0 1 1.306-.541Zm-1.674 8.784a1 1 0 0 1 1.121.862 16.226 16.226 0 0 0 1.095 4.097 1 1 0 0 1-1.849.765 18.226 18.226 0 0 1-1.229-4.602 1 1 0 0 1 .862-1.122Zm2.935 8.446a1 1 0 0 1 1.402.183c.427.555.895 1.09 1.404 1.599a1 1 0 1 1-1.414 1.414 18.43 18.43 0 0 1-1.575-1.793 1 1 0 0 1 .183-1.403Z" clip-rule="evenodd"></path>
            <path fill="#000" fill-rule="evenodd" d="M14.487 14.238a1 1 0 0 1 0-1.414c7.125-7.125 18.677-7.125 25.802 0a1 1 0 0 1-1.415 1.414c-6.344-6.344-16.63-6.344-22.973 0a1 1 0 0 1-1.414 0Z" clip-rule="evenodd"></path>
            <path fill="#000" fill-rule="evenodd" d="M42 15a1 1 0 0 1-1 1h-7a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1Z" clip-rule="evenodd"></path>
            <path fill="#000" fill-rule="evenodd" d="M41 16a1 1 0 0 1-1-1V8a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1ZM26.447 23.106l14 7-.035.07 6.14-3.07.895 1.788-13.553 6.777a2 2 0 0 1-1.788 0l-13.553-6.777.894-1.788L33 33.882l5.264-2.632-12.711-6.356.894-1.788Z" clip-rule="evenodd"></path>
            <path fill="#000" fill-rule="evenodd" d="M32.072 19.357a2 2 0 0 1 1.856 0l13 6.81A2 2 0 0 1 48 27.938v12.124a2 2 0 0 1-1.072 1.771l-13 6.81a2 2 0 0 1-1.856 0l-13-6.81A2 2 0 0 1 18 40.062V27.938a2 2 0 0 1 1.072-1.771l13-6.81ZM33 21.13l-13 6.81v12.123l13 6.81 13-6.81V27.938l-13-6.81Z" clip-rule="evenodd"></path>
            <path fill="#000" fill-rule="evenodd" d="M32 47V35h2v12h-2Z" clip-rule="evenodd"></path>
        </svg>`,
    }
];

const products = [
    {
        title: 'Item 1',
        image: 'https://309921.selcdn.ru/l-s-ru/products/product-13/0fd21b897c26f217214aa250698e4fc7.jpeg',
        price_format: '1 345.00 rub',
        measure_unit: 'шт.'
    },
    {
        title: 'Item 1',
        image: 'https://309921.selcdn.ru/l-s-ru/products/product-13/0fd21b897c26f217214aa250698e4fc7.jpeg',
        price_format: '1 345.00 rub',
        measure_unit: 'шт.'
    },
    {
        title: 'Item 1',
        image: 'https://309921.selcdn.ru/l-s-ru/products/product-13/0fd21b897c26f217214aa250698e4fc7.jpeg',
        price_format: '1 345.00 rub',
        measure_unit: 'шт.'
    },
    {
        title: 'Item 1',
        image: 'https://309921.selcdn.ru/l-s-ru/products/product-13/0fd21b897c26f217214aa250698e4fc7.jpeg',
        price_format: '1 345.00 rub',
        measure_unit: 'шт.'
    },
];
</script>

<template>

    <Layout>

        <Row class="mb-5">
            <Col>
                <div class="card card-body border bg-white fs-4 text-secondary d-flex align-items-center justify-content-center" 
                    style="height: 200px">
                    Ads Banner
                </div>
            </Col>
        </Row>

        <Row class="mb-5">
            <Col v-for="item in benefits">
                <a :href="item.uri" class="d-flex text-decoration-none text-dark">
                    <div class="me-3" v-html="item.icon"></div>
                    <div class="" v-html="item.text"></div>
                </a>
            </Col>
        </Row>


        <ProductRow :items="products" title="Новинки"/>
        <ProductRow :items="products" title="Популярные"/>

    </Layout>

</template>